<template>
    <div class="enterprise-structure-container container">
        <NavBar title="公司组织架构"></NavBar>
        <template v-if="department">
            <van-search
                class="search-box"
                v-model="keyword"
                show-action
                placeholder="请输入搜索关键词"
                @search="onSearch"
                >
                <template #action>
                    <div @click.stop="onSearch">搜索</div>
                </template>
            </van-search>
            <div class="department">
                <DepartmentTree :department="department" :isTop="true"></DepartmentTree>
            </div>
            <div class="tips">*下拉刷新组织结构，选择部门进入部分管理页面</div>
            <div class="persion-list">
                <div class="item" v-for="item of personList" :key="item.userid" @click="choosen(item)">
                    <div class="icon">
                        <img class="fullimg" :src="item.icon" v-if="item.icon">
                        <span v-else class="iconfont iconlianxiren"></span>
                    </div>
                    <div class="info-box">
                        <div class="info">
                            <span class="name">{{item.name}}</span>
                            <span class="position">{{item.position}}</span>
                        </div>
                        <span class="iconfont icondianhua"></span>
                    </div>
                </div>
            </div>
        </template>
    </div>
</template>
<script>
import NavBar from '@/components/navbar';
import DepartmentTree from '@/components/departmenttree';
import {mapState,mapMutations} from 'vuex';
export default {
    name: 'EnterpriseStructureChoosenone',
    components:{
        NavBar,
        DepartmentTree
    },
    data () {
        return { 
            keyword:'',
            department:null,
            personList: []
        }
    },
    methods:{
        choosen(item) {
            this.setChoosen(item);
            this.$animateBack();
        },
        onSearch() {

        },
        getPerson(children) {
            for(let item of children) {
                if(item.users) {
                    this.personList.push(...item.users);
                }
                if(item.children) {
                    this.getPerson(item.children);
                }
            }
        },
        ...mapMutations(['setChoosen'])
    },
    mounted() {
        this.$axios.get('/enterprise/departmenttree').then(res =>{
            this.department = res.data;
            this.getPerson(this.department.children);
        });
    },
}
</script>
<style lang="less" scoped>
@import '../../../css/var.less';
.enterprise-structure-container {
    padding-top:40px;
    background:#fff;
    .tips {
        margin-top:10px;
        padding-left: 16px;
        font-size: 12px;
        color:#999;
    }
    .persion-list {
        padding:@space;
        padding-bottom:80px;
        .item { 
            display:flex;
            flex-direction: row;
            justify-content:flex-start;
            align-items: center;
            margin: 20px 0;
            .icon {
                width:45px;
                height:45px;
                line-height:45px;
                text-align: center;
                background:@color;
                border-radius: 5px;
                .iconfont {
                    color:#fff;
                    font-size: 24px;
                }
            }
            .info-box {
                flex:1;
                display:flex;
                flex-direction:row;
                justify-content:space-between;
                align-items: center;
                .info {
                    margin-left: 10px;
                    display:flex;
                    flex-direction: column;
                    justify-content:center;
                    align-items:flex-start;
                    .position {
                        margin-top: 5px;
                        font-size:14px;
                        color:#999;
                    }
                }
                .iconfont {
                    font-size:24px;
                }
            }
        }
    }
}
</style>